<template>
    <div class="tabs-content">
        <!--*********************************************已部署的流程*******************************************************************-->
          <!-- 内容区域 -->
          <el-table
            ref="PastDefineDataList"
            border
            :data="PastDefineDataList"
            height="73.5%"
            style="width: 97.5%"
            :header-cell-style="{height: '7vh'}"
            :cell-style="cellStyle"
          >
            <!-- 复选框 -->
            <!-- <el-table-column
              type="selection"
              width="50"
              header-align="center"
              align="center">
            </el-table-column> -->
            <el-table-column
              type="index"
              :index="getIndex"
              width="55"
              label="序号"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="deploymentType"
              label="流程类型"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="deployer"
              label="部署人"
              header-align="center"
              align="center">
            </el-table-column>
            <el-table-column
              prop="deploymentTime"
              label="部署时间"
              header-align="center"
              align="center">
              <template slot-scope="scope" >
                <span>{{renderTime(scope.row['deploymentTime']) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <!-- <el-button size="small" type="primary"  @click="handleLook(scope.row)">查 看</el-button> -->
                <!-- <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button> -->
                <el-button size="small" type="danger" style="width:20;height: 30px;" @click="handleDelete(scope.row)">删 除</el-button>
                <!-- <el-link type="danger" @click="handleDelete(scope.row)">删除</el-link> -->
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block">
            <el-pagination
              align="right"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
    </div>
</template>

<script>
export default {
  name: 'PastDefine',
  data() {
    return {
      multipleSelection: [], // 选定的多个复选框对象,
      options: [{
        value: '设备编号',
        label: '设备编号'
      }, {
        value: '设备名称',
        label: '设备名称'
      }, {
        value: '设备类别',
        label: '设备类别'
      }],
      value: '',
      // *******翻页*********************
      PastDefineDataList: [], // 流程定义文件数据
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页选定的显示条数
      total: 0,
      // ********************************
      dataForm2: {}, // 想要查询的设备数据
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogFormVisible: false, // 流程定义文件的弹窗可见性
      dialogFormVisible2: false, // 已部署的流程的弹窗可见性
      dataForm: {
        title: '',
        description: '',
        file: ''
      },
      postId: 0, // 存id
      flag: 0,
      dataFormUpload: {
        title: '',
        workID: '',
        description: ''
      },
      fileList: [], // 上传的文件列表
      fileflag: 0,
      authentication: '', // 存token
      user: {}, // 当前登录的用户信息
      defineRules: {
        title: [
          { required: true, message: '主题不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ]
        // file: [
        //   { required: true, message: '请上传文件', trigger: 'change' }
        // ]
      },
      tableDataArray3: []
      // disabled: true
    }
  },
  // 生命周期
  mounted(activeName) {
    this.getDataList2()
    this.authentication = sessionStorage.getItem('tokenStr')
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
    // this.getData()
    // this.getDataList2()
  },
  created() {
    this.user = JSON.parse(window.sessionStorage.getItem('user'))
  },
  computed: {
    header() {
      return {
        authentication: this.authentication
      }
    }
  },
  watch: {
    tableData(newValue, oldValue) {
      this.currentData = newValue.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
    CurrentPage(newValue, oldValue) {
      this.currentPage = this.tableData.slice((newValue - 1) * this.pageSize, newValue * this.pageSize)
    }
  },
  methods: {
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    fixUserId() {
      const info = JSON.parse(sessionStorage.getItem('user'))
      this.dataFormUpload.workID = info.workId
    },
    // getData() {
    //   const loading = this.$loading({
    //     lock: true, // lock的修改符--默认是false
    //     text: 'Loading', // 显示在加载图标下方的加载文案
    //     spinner: 'el-icon-loading', // 自定义加载图标类名
    //     background: 'rgba(0, 0, 0, 0.7)', // 遮罩层颜色
    //     target: document.querySelector('#table')// loadin覆盖的dom元素节点
    //   })
    //   // 成功回调函数停止加载
    //   loading.close()
    // },
    // 表格行高
    cellStyle() {
      return {
        'font-size': '14px',
        height: '45px',
        padding: '0'
      }
    },
    // 表头行高
    headerStyle() {
      return {
        height: '55px'
      }
    },
    // ****************翻页*************
    // 改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList2()
    },
    // 序号
    getIndex(index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    // *********************************
    // 已部署的流程文件
    getDataList2() {
      this.getRequest('/process/deploymentInfo/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          console.log('---------------------?----------------------')
          console.log(resp)
          var len = resp.data.length
          this.total = resp.data[len - 1].total
          // console.log(this.total)
          // this.PastDefineDataList = resp.data
          this.tableDataArray3 = resp.data
          this.tableDataArray3.pop(resp.data[len - 1])
          this.PastDefineDataList = this.tableDataArray3
          console.log(this.PastDefineDataList)
        } else {
          console.log('失败')
        }
      })
    },
    // // 删除已部署的流程文件
    handleDelete(data) {
      this.$confirm('此操作将永久删除【' + data.deploymentType + '】流程的所有信息，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        var id = data.deploymentId
        console.log(id)
        this.deleteRequest(`/process/deploymentInfo/${id}`).then((resp) => {
          console.log(resp)
          if (resp.msg === '删除成功') {
            this.$message.success(resp.msg)
          } else {
            this.$message.error(resp.msg)
          }
          // this.$message.success(resp.msg)
          this.getDataList2()
          // this.getDataList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
/* .right1{
  height: 30
  0px;
}
.right2{
  height: 240px;
}
.right3{
  height: 240px;
}
.demo-form-inline{
  width: 97%;
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  margin-bottom: 0px;
  margin-top: 5px;
}
.el-table{
  width: 97%;
  margin: 15px auto
}
.first{
  width: 97%;
  margin: 0px auto
}
.el-dialog__body{
  height: 150px !important;
  overflow: auto;
} */
@import '../../assets/css/top-form.css';
@import '../../assets/css/table.css';
.tabs-content {
  width: 100%;
  height: 78vh !important;
}
/** 分页器 start  */
.block {
  position: absolute;
  top: 94% !important;
  right: 1.5%;
}
.el-pagination {
  align-items: center;
}
.el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体' !important;
  padding-top: 0px;
}
.el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.el-pagination /deep/ .el-input__inner {
  font: 1vw '宋体' !important;
}
/** 分页器 end */
</style>
